<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
	<!-- // <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
	<title>domManip</title>
</head>
<body>

<button id="test1">div.innerHTML</button>
<button id="test2">$.append</button>
<button id="test3">模拟append实现script加载</button>

<div id="test"></div>

<script type="text/javascript">

nodeType的值为11

nodeName的值为“#document-fragment”

nodeValue的值为null

parentNode的值为null

子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
	//代码不执行
	$("#test1").click(function() {
		var div = document.querySelectorAll('div')[0];
		div.innerHTML = "<script>alert('慕课网')";
		div.innerHTML = '代码不执行'
	})

	//代码执行
	$("#test2").click(function() {
		var div = $('div')
		div.append("<script>alert('慕课网')").append('代码执行了')
	})


	$("#test3").click(function() {
		append(document.querySelectorAll('div')[0],"<script>alert('慕课网')" )
	})



	//==========模拟实现script加载================

	function buildFragment(elems, context) {
		var fragment = context.createDocumentFragment(),
			nodes = [],
			i = 0,
			elem,
			l = elems.length;

		for (; i < l; i++) {
			elem = elems[i];
			//创一个元素div做为容器
			tmp = fragment.appendChild(context.createElement("div"));
			//放到文档碎片中
			tmp.innerHTML = elem;	
		}
		return fragment;
	}

	//关闭脚本执行
	function disableScript(elem) {
		elem.type = (elem.getAttribute("type") !== null) + "/" + elem.type;
		return elem;
	}

	//还原脚本
	function restoreScript(elem) {
		elem.removeAttribute("type");
		return elem;
	}

	function domManip(parentEles, target, callback) {
		var l = parentEles.length;
		var iNoClone = l - 1;
		var scripts;
		var hasScripts;
		if (l) {
			var fragment = buildFragment([target], parentEles[0].ownerDocument);
			var first = fragment.firstChild.firstChild
			if (first) {
				//"<script type="false/">alert('慕课网')
				//增加false标记
				scripts = disableScript(first);
				hasScripts = true
				callback.call(parentEles, scripts);
			}

			//执行脚本加载
			if(hasScripts){
				//去掉type锁定
				restoreScript(scripts);
				//开始执行脚本
				var code = scripts.textContent.replace(/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g, "");
				eval(code)
			}

		}

	}

	function append(parentEles, target) {
		return domManip([parentEles], target, function(elem) {
			parentEles.appendChild(elem)
		});
	}


	
	


</script>
</body>
</html>